/**
 * Created by Administrator on 2016/8/9 0009.
 */
function mymt(){

    var box=my$("box");
    var screen=box.children[0];

    var imgWidth=screen.offsetWidth;
    var ul=screen.children[0];
    var lis=ul.children;

    var arr=my$("arr");
    var left=my$("left");
    var right=my$("right");
    box.onmouseover=function () {
        arr.style.display="block";
    };
    box.onmouseout=function () {
        arr.style.display="none";
    };
    var pic=0;
    var ol=screen.children[1];
    for(var i=0;i<lis.length;i++){
        var li=document.createElement("li");
        ol.appendChild(li);
        li.setAttribute("index",i);
        li.innerHTML=i+1;
        li.onmouseover=function () {
            for(var j=0;j<ol.children.length;j++){
                ol.children[j].removeAttribute("class");
            }
            this.className="current";

            var target=-parseInt(this.getAttribute("index"))*imgWidth;
            animate(ul,target);

            pic=parseInt(this.getAttribute("index"));
        };
    }
    var li=ul.children[0];
    ul.appendChild(li.cloneNode(true));
    right.onclick=function () {
        if(pic>=lis.length-1) {
            ul.style.left=0+"px";
            pic=0;
        }
        pic++;//
        var target = -pic * imgWidth;
        animate(ul, target);

        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = "";
        }
        ol.children[pic].className = "current";


    };

    left.onclick=function () {
        if(pic==0){
            pic=lis.length-1;
            ul.style.left=-(lis.length-1)*imgWidth+"px";
        }
        pic--;
        var target=-pic*imgWidth;
        animate(ul,target);
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className="";
        }
        ol.children[pic].className="current";
    }
}

function animate(element,target) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
        var step=8;
        var current=element.offsetLeft;
        step=current<target?step:-step;
        if(Math.abs(target-current)<=Math.abs(step)){
            clearInterval(element.timeId);
            element.style.left=target+"px";
        }else{
            current=current+step;
            element.style.left=current+"px";
        }
    },10);
}
function my$(id) {
    return document.getElementById(id);
}